<template>
	<scroll-view class="scrollView" scroll-y="true"
	@refresherrestore="onRestore"
	 @scrolltolower="scrolltolower"
	 @refresherrefresh="refresherrefresh"
	 refresher-enabled="true"
	 refresher-default-style="white"
	 refresher-background="#FFF"
	 :refresher-triggered="triggered"
	 >
		<slot />
	</scroll-view>
</template>
<script>
	import {
		mapState,mapActions,mapMutations
	} from 'vuex';
export default {
	data() {
		return {
			triggered:false,
			pageSize:20,
			pageNo:1,
		};
	},
	props: {
		optColor:{
			type: Object,
			default: ()=>({
				color:"#0a7cfc"
			})
		},
		defColor:{
			type: Object,
			default: ()=>({
				color:"#0a7cfc",
				opacity:0.5
			})
		},
	},
	mounted() {
	},
	methods: {
		refresherrefresh(e){
			//防止多次加载
			let _this= this;
			if (this.triggered) return;  
			console.log("重新加载")
			this.pageNo =  1 ;
			this.triggered = true;
			this.$emit('loadMoreFn',{pageNo:this.pageNo,pageSize:this.pageSize},()=>{
				_this.triggered = false;
			});
		},

		scrolltolower(e){
			//防止多次加载
			let _this=  this;
			if(_this.loadMoreState) return ;
			console.log("加载更多")
			_this.loadMoreState = true ;
			this.pageNo +=1 ;
			this.$emit('loadMoreFn',{pageNo:this.pageNo,pageSize:this.pageSize},()=>{
				_this.loadMoreState = false;
			});
		},
		scrolltoupper(e){
			
		},
		onRestore(e){
			
		}
	}
};
</script>

<style lang="scss" scoped>
	.scrollView{
		height:48vh;
		// flex:1;
	}
</style>
